<template>
  <div class="index">

    <fuChuang></fuChuang>
<!--    <div class="logo">-->
<!--      <img src="/static/images/logo.png" class="images" alt=>-->
<!--    </div>-->
<!--    <img  alt="">-->

    <div class="icon">
      <img src="/static/images/logo.png" class="images" alt="">
      <div class="text">
        <p>嘿！！！Job</p>
      </div>
    </div>
    <div class="swiper">
      <swiper autoplay interval="3000" class="ad" indicator-dots	indicator-active-color="rgba(18, 150, 219,1.0)"	indicator-color="white"	>
        <swiper-item>
          <img src="/static/images/ad/ad-1.jpg" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/images/ad/ad-1.jpg" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/images/ad/ad-1.jpg" alt="">
        </swiper-item>
      </swiper>
    </div>
    <van-divider />
    <div class="hotJob">
      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" icon="https://img.yzcdn.cn/vant/logo.png" size="large" block round  type="info">热门兼职</van-button>
    </div>
    <van-divider class="top"/>
    <div class="list">
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>

        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
      <van-card @click="toJobDetail(index)">
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">2019年2月1日</span>
        </div>

      </van-card>
    </div>
    <van-divider contentPosition="center">我是有底线的</van-divider>
  </div>
</template>

<script>
  import fuChuang from '../../components/fuChuang/fuChuang.vue'
  // import request from '../../utils/request.js'
  export default {
  components: {
    fuChuang
  },
  data () {
    return {

      }
    },
  onLoad(){

    // var data = {
    //   x: '',
    //   y: ''
    // };
    // wx.request({
    //   url: 'http://mock.studyinghome.com/mock/5e606e87597ac8103c472ce2/heyjob/u/get/my/appeal/search', //仅为示例，并非真实的接口地址
    //   data: {
    //     x: '',
    //     y: ''
    //   },
    //   method: "GET",
    //   header: {
    //     'content-type': 'application/json' // 默认值
    //   },
    //   success (res) {
    //     console.log(res.data)
    //   }
    // })
    // // this.$fly.request({
    // //   method: 'get', // post/get 请求方式
    // //   url: '/heyjob/get/school/name/list',
    // //   body: {}
    // // }).then(res => {
    // //   console.log(res)
    // // })

  },
  onShareAppMessage(options){
    var that = this;
    // console.log("onShareAppMessage")
    // console.log(options)
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "嘿！Job",        // 默认是小程序的名称(可以写slogan等)
      path: '/pages/index/main',        // 默认是当前页面，必须是以‘/’开头的完整路径
      imageUrl: '/static/images/HeyJob.png',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function(res){
        // 转发成功之后的回调
        console.log(res)
        if(res.errMsg == 'shareAppMessage:ok'){
          console.log('转发成功')
          wx.showToast({
            title: '转发成功',
            icon: 'success',
            duration: 1500
          })
        }
      },
      fail: function(){
        // 转发失败之后的回调
        if(res.errMsg == 'shareAppMessage:fail cancel'){
          // 用户取消转发
          console.log('用户取消转发')
        }else if(res.errMsg == 'shareAppMessage:fail'){
          // 转发失败，其中 detail message 为详细失败信息
          console.log("转发失败",res)
        }
      },
      complete(){
        console.log('转发了，不知道成没成功')
        // 转发结束之后的回调（转发成不成功都会执行）
    }
  };
    // 来自页面内的按钮的转发
    if( options.from == 'button' ){
      var eData = options.target.dataset;
      console.log( "button转发",eData.name );     // shareBtn
      // 此处可以修改 shareObj 中的内容
      shareObj.path = '/pages/index/main'
    }
    // 返回shareObj
    return shareObj;
  },
  methods: {
    a(){
      wx.startPullDownRefresh({
        success: (res) =>{
          console.log(res)
        }
      })
    },
    toJobDetail(index){
      wx.navigateTo({
        url: "/pages/jobDetail/main",
      })
    },

  }
  }


// #1989FA
//   rgb(25, 137, 250)
</script>

<style lang="stylus" rel="stylesheet/stylus">
.index
  .icon
    background-color: #1296DB;
    /*width 100%*/
    /*height 300rpx*/
    /*overflow hidden*/
    .text
      width 300px
      height 200px
      position absolute
      left 73%
      margin-left -150px
      background-image -webkit-linear-gradient(left,white 10%,#66ffff 20%,#FFE628 30%,#00FF7F 40%);
      -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
      -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 4s linear infinite;
      font-size: 35px;
      top 34rpx
      font-style italic
      letter-spacing 7rpx
    /*.images
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      width: 100%;
      height: 619rpx;
      margin-top: -193rpx;
      margin-bottom: -184rpx;*/
    img
      width: 150rpx;
      height: 150rpx;
      margin: 10rpx 40rpx;
      border-radius: 150rpx;
      border-color: #e5e5e5;
      /*background-color: white;*/
      border-width: 20rpx;
    h1
      height 150rpx
      font-family "微软雅黑" "黑体" "宋体"
      font-size 80rpx
      line-height 150rpx
      margin 10rpx 20rpx
      color white
  .logo
    width 100%
    height 200rpx
  .images
    background-repeat no-repeat
    background-position center center
    background-size cover
    width 100%
    height 170rpx
  .swiper
    .ad
      swiper-item
        width 100%
        height 300rpx
        img
          width 95%
          height 300rpx
          margin 20rpx 2.5%

  .hotJob
    margin 0rpx auto
    width 100%
    height 100rpx
    margin-bottom -20rpx
    van-button
      display block
      margin -20rpx auto
      text-align center
      font-size 60rpx
      width 100%
      height 40rpx
      line-height 50rpx
      letter-spacing 72rpx

  .list
    van-card
      width 100%
      height 200rpx
      border-bottom 1rpx solid rgb(235, 237, 240)
      margin-bottom 5rpx
      .title
        .title-1
          font-weight bold
        .price
          display inline-block
          float right
      .desc
        display block
        width 100%
        height 40rpx
        margin-top 10rpx
      .bottom
        display block
        width 100%
        margin-top 10rpx
        height 40rpx
        line-height 40rpx
        van-icon
          display inline-block
          line-height 40rpx
        .time
          display inline-block
          float right
          line-height 40rpx

          height 40rpx
      .tags
        display: inline-block
        margin-bottom 5rpx
        height 50rpx
        span
          font-size 30rpx
          display inline-block
          height 60rpx
          line-height 60rpx
          margin-right 30rpx
          margin-bottom  5rpx
        van-rate
          display inline-block
          height 60rpx
          line-height 60rpx

</style>
